<template>
  <a-drawer
    title="Hms Info"
    placement="right"
    v-model:visible="sVisible"
    @update:visible="onVisibleChange"
    :destroyOnClose="true"
    :width="800"
  >
    <div class="flex-row flex-align-center">
      <div style="width: 240px">
        <a-range-picker
          v-model:value="time"
          format="YYYY-MM-DD"
          :placeholder="['Start Time', 'End Time']"
          @change="onTimeChange"
        />
      </div>
      <div class="ml5">
        <a-select style="width: 150px" v-model:value="param.level" @select="onLevelSelect">
          <a-select-option v-for="item in levels" :key="item.label" :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </div>
      <div class="ml5">
        <a-select
          v-model:value="param.domain"
          :disabled="!param.children_sn || !param.device_sn"
          style="width: 150px"
          @select="onDeviceTypeSelect"
        >
          <a-select-option v-for="item in deviceTypes" :key="item.label" :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </div>
      <div class="ml5">
        <a-input-search v-model:value="param.message" placeholder="input search message" style="width: 200px" @search="getHms" />
      </div>
    </div>
    <div>
      <a-table
        :columns="hmsColumns"
        :scroll="{ x: '100%', y: 600 }"
        :data-source="hmsData.data"
        :pagination="hmsPaginationProp"
        @change="refreshHmsData"
        row-key="hms_id"
        :rowClassName="rowClassName"
        :loading="loading"
      >
        <template #time="{ record }">
          <div>{{ record.create_time }}</div>
          <div
            :style="
              record.update_time
                ? ''
                : record.level === EHmsLevel.CAUTION
                ? 'color: orange;'
                : record.level === EHmsLevel.WARN
                ? 'color: red;'
                : 'color: #28d445;'
            "
          >
            {{ record.update_time ?? 'It is happening...' }}
          </div>
        </template>
        <template #level="{ text }">
          <div class="flex-row flex-align-center">
            <div
              :class="text === EHmsLevel.CAUTION ? 'caution' : text === EHmsLevel.WARN ? 'warn' : 'notice'"
              style="width: 10px; height: 10px; border-radius: 50%"
            ></div>
            <div style="margin-left: 3px">{{ EHmsLevel[text] }}</div>
          </div>
        </template>
        <template v-for="col in ['code', 'message']" #[col]="{ text }" :key="col">
          <a-tooltip :title="text">
            <div>{{ text }}</div>
          </a-tooltip>
        </template>
        <template #domain="{ text }">
          <a-tooltip :title="EDeviceTypeName[text]">
            <div>{{ EDeviceTypeName[text] }}</div>
          </a-tooltip>
        </template>
      </a-table>
    </div>
  </a-drawer>
</template>

<!-- 暂时只抽取该组件 -->
<script lang="ts" setup>
import { watchEffect, reactive, ref, watch } from 'vue'
import { getDeviceHms, HmsQueryBody } from '@/api/manage'
import moment, { Moment } from 'moment'
import { ColumnProps, TableState } from 'ant-design-vue/lib/table/interface'
import { Device, DeviceHms } from '@/types/device'
import { IPage } from '@/api/http/type'
import { EDeviceTypeName, EHmsLevel, ELocalStorageKey } from '@/types'
import { sessionStorage } from '@/utils/storage'

const props = defineProps<{
  visible: boolean
  device: null | Device
}>()
const emit = defineEmits(['update:visible', 'ok', 'cancel'])

const workspaceId: string = sessionStorage.get(ELocalStorageKey.WorkspaceId) || ''
// 健康状态
const sVisible = ref(false)

watch(props, () => {
  sVisible.value = props.visible
  // 显示弹框时，获取设备hms信息
  if (props.visible) {
    showHms()
  }
})

function onVisibleChange(sVisible: boolean) {
  setVisible(sVisible)
}

function setVisible(v: boolean, e?: Event) {
  sVisible.value = v
  emit('update:visible', v, e)
}

const loading = ref(false)

const hmsColumns: ColumnProps[] = [
  {
    title: 'Alarm Begin | End Time',
    dataIndex: 'create_time',
    width: '25%',
    className: 'titleStyle',
    slots: { customRender: 'time' }
  },
  { title: 'Level', dataIndex: 'level', width: '120px', className: 'titleStyle', slots: { customRender: 'level' } },
  { title: 'Device', dataIndex: 'domain', width: '12%', className: 'titleStyle', slots: { customRender: 'domain' } },
  {
    title: 'Error Code',
    dataIndex: 'key',
    width: '20%',
    className: 'titleStyle',
    ellipsis: true,
    slots: { customRender: 'code' }
  },
  { title: 'Hms Message', dataIndex: 'message_en', className: 'titleStyle', ellipsis: true, slots: { customRender: 'message' } },
  { title: 'Hms Message', dataIndex: 'message_zh', className: 'titleStyle', ellipsis: true, slots: { customRender: 'message' } }
]

interface DeviceHmsData {
  data: DeviceHms[]
}

const hmsData = reactive<DeviceHmsData>({
  data: []
})

type Pagination = TableState['pagination']

const hmsPaginationProp = reactive({
  pageSizeOptions: ['20', '50', '100'],
  showQuickJumper: true,
  showSizeChanger: true,
  pageSize: 50,
  current: 1,
  total: 0
})

// 获取分页信息
function getPaginationBody() {
  return {
    page: hmsPaginationProp.current,
    page_size: hmsPaginationProp.pageSize
  } as IPage
}

function showHms() {
  const dock = props.device
  if (!dock) return
  if (dock.domain === EDeviceTypeName.Dock) {
    getDeviceHmsBySn(dock.device_sn, dock.children?.[0].device_sn ?? '')
  }
  if (dock.domain === EDeviceTypeName.Aircraft) {
    param.domain = EDeviceTypeName.Aircraft
    getDeviceHmsBySn('', dock.device_sn)
  }
}

function refreshHmsData(page: Pagination) {
  hmsPaginationProp.current = page?.current!
  hmsPaginationProp.pageSize = page?.pageSize!
  getHms()
}

const param = reactive<HmsQueryBody>({
  sns: [],
  device_sn: '',
  children_sn: '',
  language: 'en',
  begin_time: new Date(new Date().setDate(new Date().getDate() - 7)).setHours(0, 0, 0, 0),
  end_time: new Date().setHours(23, 59, 59, 999),
  domain: -1,
  level: '',
  message: ''
})

const levels = [
  {
    label: 'All',
    value: ''
  },
  {
    label: EHmsLevel[0],
    value: EHmsLevel.NOTICE
  },
  {
    label: EHmsLevel[1],
    value: EHmsLevel.CAUTION
  },
  {
    label: EHmsLevel[2],
    value: EHmsLevel.WARN
  }
]

const deviceTypes = [
  {
    label: 'All',
    value: -1
  },
  {
    label: EDeviceTypeName[EDeviceTypeName.Aircraft],
    value: EDeviceTypeName.Aircraft
  },
  {
    label: EDeviceTypeName[EDeviceTypeName.Dock],
    value: EDeviceTypeName.Dock
  }
]

const rowClassName = (record: any, index: number) => {
  const className = []
  if ((index & 1) === 0) {
    className.push('table-striped')
  }
  if (record.domain !== EDeviceTypeName.Dock) {
    className.push('child-row')
  }
  return className.toString().replaceAll(',', ' ')
}

const time = ref([moment(param.begin_time), moment(param.end_time)])

function getHms() {
  loading.value = true
  getDeviceHms(param, workspaceId, getPaginationBody())
    .then((res) => {
      hmsPaginationProp.total = res.data.pagination.total
      hmsPaginationProp.current = res.data.pagination.page
      hmsData.data = res.data.list
      hmsData.data.forEach((hms) => {
        hms.domain = hms.sn === param.children_sn ? EDeviceTypeName.Aircraft : EDeviceTypeName.Dock
      })
      loading.value = false
    })
    .catch((_err) => {
      loading.value = false
    })
}

function getDeviceHmsBySn(sn: string, childSn: string) {
  param.device_sn = sn
  param.children_sn = childSn
  param.sns = [param.device_sn, param.children_sn]
  getHms()
}

function onTimeChange(newTime: [Moment, Moment]) {
  param.begin_time = newTime[0].valueOf()
  param.end_time = newTime[1].valueOf()
  getHms()
}

function onDeviceTypeSelect(val: number) {
  param.sns = [param.device_sn, param.children_sn]
  if (val === EDeviceTypeName.Dock) {
    param.sns = [param.device_sn, '']
  }
  if (val === EDeviceTypeName.Aircraft) {
    param.sns = ['', param.children_sn]
  }
  getHms()
}

function onLevelSelect(val: number) {
  param.level = val
  getHms()
}
</script>
